@import 'mixin.scss';
@import 'color.scss';
$color-606a7c: #606a7c;
$color-686868: #686868;
$background-F1F2F6:#F1F2F6;
$searchIcons:"../../assets/images/search_icons.png";
$searchArrow:"../../assets/images/search_arrow.png";
.page {
    height: 100vh;
    background-color: $color-white!important;
}

.search-head {
    padding: rem(40px) rem(30px) rem(10px);
    font-size: rem(30px);
    color: $color-606a7c;
    .garbage-pic {
        display: inline-block;
        width: rem(26px);
        height: rem(26px);
        background: url($searchIcons) no-repeat 0 rem(-50px);
        background-size: rem(26px) rem(78px);
    }
}

.recent-tags {
    margin-bottom: rem(30px);
}

.search-tags {
    padding: 0 rem(30px);
    font-size: 0;
    span {
        display: inline-block;
        padding: rem(15px) rem(30px);
        margin: rem(20px) rem(20px) 0 0;
        text-align: center;
        font-size: rem(28px);
        border-radius: rem(5px);
        background-color: $background-F1F2F6;
    }
    a {
        color: $color-686868;
    }
}

.search-result {
    position: absolute;
    top: rem(96px);
    left: 0;
    width: 100%;
    @include box-shadow(0px 5px 10px rgba(0, 0, 0, .2));
    background-color: $color-white;
    li {
        padding: rem(25px) rem(30px);
        border-bottom: 1px $border-color solid;
        font-size: rem(28px);
        i {
            display: inline-block;
            width: rem(28px);
            height: rem(28px);
            background: url($searchArrow) no-repeat center;
            background-size: rem(28px);
        }
    }
}